import React, { PureComponent } from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts'
import '../../util/china'
import { setTitle, scale, tooltip, mapLineStyle, mapEffectStyle } from './util/common'
import baseChart from './base-chart'
import { connect } from 'react-redux'

const geoCoordMap = {
    '安徽': [117.17, 31.52],
    '北京': [116.24, 39.55],
    '重庆': [106.54, 29.59],
    '福建': [119.18, 26.05],
    '甘肃': [103.51, 36.04],
    '广东': [113.14, 23.08],
    '广西': [108.19, 22.48],
    '贵州': [106.42, 26.35],
    '海南': [110.2, 20.02],
    '河北': [114.3, 38.02],
    '河南': [113.4, 34.46],
    '黑龙江': [126.36, 45.44],
    '湖北': [114.17, 30.35],
    '湖南': [112.59, 28.12],
    '吉林': [125.19, 43.54],
    '江苏': [118.46, 32.03],
    '江西': [115.55, 28.4],
    '辽宁': [123.25, 41.48],
    '内蒙古': [111.41, 40.48],
    '宁夏': [106.16, 38.27],
    '青海': [101.48, 36.38],
    '山东': [117, 36.4],
    '山西': [112.33, 37.54],
    '陕西': [108.57, 34.17],
    '上海': [121.29, 31.14],
    '四川': [104.04, 30.4],
    '天津': [117.12, 39.02],
    '西藏': [91.08, 29.39],
    '新疆': [87.36, 43.45],
    '云南': [102.42, 25.04],
    '浙江': [120.1, 30.16],
    '香港': [115.12, 21.23],
    '澳门': [115.07, 21.33],
    '台湾': [121.3, 25.03]
}

var convertData = function (data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name]
        if (geoCoord) {
            res.push(geoCoord.concat(data[i].value))
        }
    }
    return res
}

class ChinaMap extends PureComponent {
    constructor () {
        super()
    }

    shouldComponentUpdate (nextProps) {
        return nextProps.chinaOrder !== this.props.chinaOrder
    }

    renderDate = (chinaOrder) => {

        return convertData(chinaOrder.toJS().map(c => {
            return {
                name: c.province,
                nameEn: c.provinceEn,
                percent: c.percent,
                value: c.quantity / 100 / scale
            }
        }))
    }

    componentWillUpdate (nextProps) {
        const {chinaOrder} = nextProps
        const data = this.renderDate(chinaOrder)
        this.myChart.setOption({
            visualMap: {
                min: Math.min(...data.map(d => d[2]))/2,
                max: Math.max(...data.map(d => d[2])) * 1.3,
            },
            series: [{
                data
            }]
        })
        console.log(Math.min(...data.map(d => d[2])))
    }

    componentDidMount () {
        const {setChartInstance, chinaOrder} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart))
        const data = this.renderDate(chinaOrder)

        const option = {
            visualMap: {
                show: false,
                min: 0,
                max: 800,
                splitNumber: 5,
                inRange: {
                    color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                },
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#879EA6',
                        borderColor: '#879EA6',
                        borderWidth: 0.2 * scale
                    },
                    emphasis: {
                        areaColor: '#879EA6',
                        borderColor: '#879EA6',
                        borderWidth: 0
                    }
                }
            },
            series: [{
                name: 'AQI',
                type: 'heatmap',
                coordinateSystem: 'geo',
                minOpacity: .0,
                maxOpacity: .8,
                blurSize: 10 * scale,
                data
            }]
        }
        this.myChart.setOption(option)
    }

    render () {
        return (
            <div ref="chart" className="index-map-chart"/>
        )
    }

}

function mapStoreToProps ({chinaOrder}) {
    return {
        chinaOrder
    }
}

export default baseChart(connect(mapStoreToProps)(ChinaMap))